<template>
	<div class="topic-item " :class="{'overdue':data.overdue==0}" >
		<div class="bg" @click="gocontent(data.id)" v-bind:style="{backgroundColor: getRandomColor()}">
			<div class="bg-title">
				{{data.topicName}}
			</div>
			<div class="bg-time">
				{{data.monitorStartTime|fomartTime}} - {{data.monitorEndTime|fomartTime}}
			</div>
		</div>
		<div class="content">
			<div class="body" @click="gocontent(data.id)">
				{{data.profileText|fomartText}}
			</div>
			<div class="Relevant">
				<b>相关舆论：</b><span>{{data.total}}篇</span>
			</div>
			<div class="checks">
				<div @click="updateTopic(data.id)"><span class="icons icons-pencil" ></span>修改</div>
				<div @click="delTopic(data)"><span class="icons icons-trash"></span>删除</div>
			</div>
		</div>
	</div>
</template>
<script>
import {bus} from 'src/bus.js'
const colors = ['#8f82bc','#f8b551','#88abda','#eb6877','#13b5b1','#a9a9a9']
export default	{
	name:'topic-item',
	props:['data'],
	methods: {
		getRandomColor(){
			let i = Math.floor(Math.random()*5)
			return colors[i]
		},
		updateTopic(id){
			this.$store.commit('updateId',{
						_id:id,
						name:this.data.topicName,
						timestart:this.data.monitorStartTime,
						timeend:this.data.monitorEndTime,
				});
			window.open('#/topic/eventTraces/topicUpdate');
		},
		delTopic(item){
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let res = await this.$http.post('/vrv-monitor-platform-web/topic/delete',{
					id:item.id
				})
				let data = res.body
				if (data.success==true) {
					this.$message.success('删除成功');
					this.$emit("deltopic",item.id)
				}else{
					this.$message.error(data.message);
				}
			}).catch(() => {
				this.$message.info('已取消删除')         
			});
		},
		gocontent(id){
			this.$store.commit('updateId',{
				_id:id,
				name:this.data.topicName,
				timestart:this.data.monitorStartTime,
				timeend:this.data.monitorEndTime,
				});
			window.open('#/topic/eventTraces/evens');
		}
	},
	filters: {
		fomartTime: function (value) {
			let date = new Date(value);
			let m = date.getMonth()+1
			m = m>=10?m:`0${m}`
			let d = date.getDate()>10?date.getDate():`0${date.getDate()}`
			return date.getFullYear()+"/"+m+"/"+d;
		},
		fomartText:function(value){
			let _value = value.slice(0,65)
			_value = _value+'.....'
			return _value
		}
	}
}
</script>
<style lang="stylus" scoped>
	.topic-item
		display inline-block
		margin-bottom 2.8rem
		width 16.25rem
		height 22.5rem
		border-radius 5px
		border 1px solid #dcdcdc
		background #fff
		overflow hidden
		.bg
			position relative
			height 9.5rem
			background url(./img/bg.png) no-repeat center 1.4rem
			line-height 8.3rem
			cursor pointer
			&:after	
				height 19px
				position absolute
				top .8rem
				left 6.3rem
				content "专题"
				letter-spacing: 12px
				font-size 1.125rem
				color #fff
				line-height 1
			.bg-title
				font-size 1.125rem
				font-weight bold
				text-align center
				color #fff
				letter-spacing 0.2rem
			.bg-time
				position absolute
				bottom 2rem
				width 100%
				line-height 1
				font-size 0.88rem
				text-align center
				color #fff
		.content
			padding 1rem 1.6rem 0.5rem
			.body
				cursor pointer
				height 5.3rem
				color #666
				font-size 0.625rem
				overflow hidden
				line-height 1.3rem
				text-align left
				text-indent 25px
			.Relevant
				margin-top 0.625rem
				height 1.9rem
				line-height 1.9rem
				color #000
				font-size 0.75rem
				text-align left
				b
					display inline-block
					vertical-align top
					font-weight normal
				span
					display inline-block
					height 1.4rem
					line-height 1.4rem
					width 3.4rem
					color #fff
					padding 0 0.3rem
					background #e85a47
					border-radius 1rem
					font-weight normal
					margin-left 1rem
					font-size 0.75rem
					overflow hidden
					margin-top 0.2rem
					white-space nowrap
			.checks
				margin-top 1.2rem
				display flex
				justify-content space-between
				border-top 1px solid #dcdcdc
				div
					flex 1
					text-align center
					font-size 0.88rem
					color #333
					height 80%
					margin-top 0.625rem
					cursor pointer
					.fa
						font-size 1.3rem
						margin-right 0.625rem
						color #666
					&:first-child
						border-right: 1px solid #dcdcdc;
				.icons
					display inline-block
					width 1.2rem
					height 1.2rem
					background red
					vertical-align top
					margin-right 0.8rem
					&.icons-pencil
						background url('./img/edit.png') no-repeat
					&.icons-trash
						background url('./img/delete.png') no-repeat
.overdue
	>.bg
		background #aaa !important
		opacity 0.9
	>.content
		.Relevant
			opacity 0.7
	
	

</style>